<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台母版页面</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script src="../assets/js/chart.umd.min.js"></script>
    <!-- 原始样式已合并到公共配置文件 src/input.css 中 -->
    <!-- 请勿删除此注释，保留原始样式记录 -->
    <!--
    <style>
        /* 图表容器样式 */
        .chart-container {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .chart-container:hover {
            transform: translateY(-2px);
        }
        
        /* 按钮悬停效果 */
        .chart-btn {
            transition: all 0.2s ease;
        }
        
        .chart-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 卡片悬停效果 */
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        /* 表格行悬停效果 */
        .table-hover {
            transition: background-color 0.2s ease;
        }
        
        /* 加载动画 */
        .chart-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #6B7280;
        }
        
        .chart-loading::after {
            content: '';
            width: 20px;
            height: 20px;
            border: 2px solid #E5E7EB;
            border-top: 2px solid #3B82F6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 8px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 响应式图表 */
        @media (max-width: 768px) {
            .chart-container {
                height: 250px !important;
            }
        }
        
        /* 图表工具提示样式 */
        .chartjs-tooltip {
            background: rgba(0, 0, 0, 0.9) !important;
            border-radius: 8px !important;
            border: 1px solid #3B82F6 !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        }
    </style>
    -->
    <!-- 原始配置已合并到公共配置文件 tailwind.config.js 中 -->
    <!-- 请勿删除此注释，保留原始配置记录 -->
    <!--
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                        gray: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    -->
    <!-- 原始工具类已合并到公共配置文件 src/input.css 中 -->
    <!-- 请勿删除此注释，保留原始工具类记录 -->
    <!--
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-card {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
        }
    </style>
    -->
</head>

<body class="bg-gray-100 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-0 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-bold text-primary flex items-center">
                        <i class="fa fa-book mr-2"></i>
                        <span>睿途教育</span>
                    </h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <!-- 控制面板 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-tachometer mr-1"></i> 控制面板
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-dashboard mr-2"></i> 仪表盘
                                </a>
                                <a href="dashboard/data-overview.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 数据概览
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-2"></i> 任务管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 教材管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                            <i class="fa fa-book mr-1"></i> 教材管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-list mr-2"></i> 版本管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-sitemap mr-2"></i> 章节管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                    <i class="fa fa-exchange mr-2"></i> 版本对比
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 题库管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-database mr-1"></i> 题库管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-question-circle mr-2"></i> 题目管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tags mr-2"></i> 标签管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-filter mr-2"></i> 筛选规则
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-upload mr-2"></i> 批量导入
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 组卷系统 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-files-o mr-1"></i> 组卷系统
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-magic mr-2"></i> 智能组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-edit mr-2"></i> 手动组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-copy mr-2"></i> 试卷模板
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i> 历史试卷
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-bar-chart mr-1"></i> 数据分析
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-pie mr-2"></i> 学习分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 趋势分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-file-text mr-2"></i> 报告生成
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-cog mr-1"></i> 系统设置
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-shield mr-2"></i> 权限设置
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-database mr-2"></i> 数据备份
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-cogs mr-2"></i> 系统配置
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索教材、章节或知识点..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <div class="relative">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span
                                class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                        <span class="hidden md:inline font-medium">张老师</span>
                        <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
<main class="flex-1 container mx-auto px-4 py-6">
    <!-- 面包屑导航 -->
    <div class="flex items-center text-sm text-gray-500 mb-4">
        <a href="#" class="hover:text-primary">首页</a>
        <i class="fa fa-angle-right mx-2 text-gray-300"></i>
        <a href="#" class="hover:text-primary">教材管理</a>
        <i class="fa fa-angle-right mx-2 text-gray-300"></i>
        <span class="text-primary font-medium">教材列表</span>
    </div>
    <!-- 页面标题 -->
    <div class="mb-6">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">教材列表</h2>
        <p class="text-gray-500 mt-1">管理系统中的所有教材，支持添加、编辑和删除操作</p>
    </div>

    <!-- 筛选和搜索 -->
    <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">教材名称</label>
                <input type="text" placeholder="输入教材名称" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">学科</label>
                <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                    <option value="">全部学科</option>
                    <option value="math">数学</option>
                    <option value="chinese">语文</option>
                    <option value="english">英语</option>
                    <option value="physics">物理</option>
                    <option value="chemistry">化学</option>
                    <option value="biology">生物</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">适用年级</label>
                <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                    <option value="">全部年级</option>
                    <option value="grade1">一年级</option>
                    <option value="grade2">二年级</option>
                    <option value="grade3">三年级</option>
                    <option value="grade4">四年级</option>
                    <option value="grade5">五年级</option>
                    <option value="grade6">六年级</option>
                    <option value="junior">初中</option>
                    <option value="senior">高中</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                    <option value="">全部状态</option>
                    <option value="active">启用</option>
                    <option value="inactive">禁用</option>
                    <option value="draft">草稿</option>
                </select>
            </div>
        </div>
        <div class="flex flex-wrap justify-between mt-4 gap-4">
            <div class="flex items-center space-x-4">
                <button class="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fa fa-filter mr-1"></i> 高级筛选
                </button>
                <button class="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fa fa-sort mr-1"></i> 排序
                </button>
            </div>
            <div>
                <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    <i class="fa fa-search mr-1"></i> 搜索
                </button>
                <button class="px-4 py-2 bg-success text-white rounded-lg hover:bg-success/90 transition-colors ml-2">
                    <i class="fa fa-plus mr-1"></i> 添加教材
                </button>
            </div>
        </div>
    </div>

    <!-- 数据统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow-sm p-5 flex items-center">
            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary mr-4">
                <i class="fa fa-book text-xl"></i>
            </div>
            <div>
                <p class="text-gray-500 text-sm">教材总数</p>
                <p class="text-2xl font-bold">128</p>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm p-5 flex items-center">
            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-success mr-4">
                <i class="fa fa-check-circle text-xl"></i>
            </div>
            <div>
                <p class="text-gray-500 text-sm">已发布</p>
                <p class="text-2xl font-bold">92</p>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm p-5 flex items-center">
            <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-warning mr-4">
                <i class="fa fa-clock-o text-xl"></i>
            </div>
            <div>
                <p class="text-gray-500 text-sm">审核中</p>
                <p class="text-2xl font-bold">18</p>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm p-5 flex items-center">
            <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
                <i class="fa fa-pencil text-xl"></i>
            </div>
            <div>
                <p class="text-gray-500 text-sm">草稿</p>
                <p class="text-2xl font-bold">18</p>
            </div>
        </div>
    </div>

    <!-- 教材列表 -->
    <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
        <div class="flex justify-between items-center mb-5">
            <h3 class="font-semibold text-gray-800">教材列表</h3>
            <div class="flex items-center space-x-2">
                <span class="text-sm text-gray-500">显示方式：</span>
                <button id="cardViewBtn" class="p-2 text-primary bg-primary/10 rounded">
                    <i class="fa fa-th-large"></i>
                </button>
                <button id="listViewBtn" class="p-2 text-gray-400 hover:text-gray-600 rounded hover:bg-gray-100">
                    <i class="fa fa-list"></i>
                </button>
            </div>
        </div>

        <!-- 教材卡片网格 -->
        <div id="textbookViewContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 教材卡片 1 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden card-hover">
                <div class="relative">
                    <img src="https://picsum.photos/id/24/800/400" alt="高中数学必修一" class="w-full h-48 object-cover">
                    <div class="absolute top-3 right-3">
                        <span class="px-2 py-1 text-xs bg-success text-white rounded-full">已发布</span>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-lg">高中数学必修一</h4>
                        <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">数学</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">本书涵盖高中数学必修一的全部内容，包括集合与函数概念、基本初等函数等章节，适合高中一年级学生使用。</p>
                    <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                        <span><i class="fa fa-user mr-1"></i> 王教授</span>
                        <span><i class="fa fa-calendar mr-1"></i> 2025-03-15</span>
                        <span><i class="fa fa-eye mr-1"></i> 1284</span>
                    </div>
                    <div class="flex justify-between">
                        <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            查看详情
                        </button>
                        <div class="flex space-x-1">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded hover:bg-primary/10 transition-colors" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded hover:bg-danger/10 transition-colors" title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-success rounded hover:bg-success/10 transition-colors" title="复制">
                                <i class="fa fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 教材卡片 2 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden card-hover">
                <div class="relative">
                    <img src="https://picsum.photos/id/25/800/400" alt="高中语文必修一" class="w-full h-48 object-cover">
                    <div class="absolute top-3 right-3">
                        <span class="px-2 py-1 text-xs bg-success text-white rounded-full">已发布</span>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-lg">高中语文必修一</h4>
                        <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">语文</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">本书精选了经典现代文和文言文，包括《沁园春·长沙》《雨巷》等课文，培养学生的阅读理解和写作能力。</p>
                    <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                        <span><i class="fa fa-user mr-1"></i> 李老师</span>
                        <span><i class="fa fa-calendar mr-1"></i> 2025-01-20</span>
                        <span><i class="fa fa-eye mr-1"></i> 1562</span>
                    </div>
                    <div class="flex justify-between">
                        <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            查看详情
                        </button>
                        <div class="flex space-x-1">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded hover:bg-primary/10 transition-colors" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded hover:bg-danger/10 transition-colors" title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-success rounded hover:bg-success/10 transition-colors" title="复制">
                                <i class="fa fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 教材卡片 3 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden card-hover">
                <div class="relative">
                    <img src="https://picsum.photos/id/26/800/400" alt="高中英语必修一" class="w-full h-48 object-cover">
                    <div class="absolute top-3 right-3">
                        <span class="px-2 py-1 text-xs bg-warning text-white rounded-full">审核中</span>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-lg">高中英语必修一</h4>
                        <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">英语</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">本书围绕日常生活主题展开，包括问候、介绍、购物等实用场景，提升学生英语听说读写能力。</p>
                    <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                        <span><i class="fa fa-user mr-1"></i> 张老师</span>
                        <span><i class="fa fa-calendar mr-1"></i> 2025-04-05</span>
                        <span><i class="fa fa-eye mr-1"></i> 942</span>
                    </div>
                    <div class="flex justify-between">
                        <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            查看详情
                        </button>
                        <div class="flex space-x-1">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded hover:bg-primary/10 transition-colors" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded hover:bg-danger/10 transition-colors" title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-success rounded hover:bg-success/10 transition-colors" title="复制">
                                <i class="fa fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 教材卡片 4 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden card-hover">
                <div class="relative">
                    <img src="https://picsum.photos/id/27/800/400" alt="初中物理" class="w-full h-48 object-cover">
                    <div class="absolute top-3 right-3">
                        <span class="px-2 py-1 text-xs bg-success text-white rounded-full">已发布</span>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-lg">初中物理</h4>
                        <span class="px-2 py-1 text-xs bg-red-100 text-red-800 rounded-full">物理</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">本书涵盖初中物理基础知识，包括力学、热学、光学等内容，配有丰富的实验和案例分析。</p>
                    <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                        <span><i class="fa fa-user mr-1"></i> 赵老师</span>
                        <span><i class="fa fa-calendar mr-1"></i> 2025-02-18</span>
                        <span><i class="fa fa-eye mr-1"></i> 876</span>
                    </div>
                    <div class="flex justify-between">
                        <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            查看详情
                        </button>
                        <div class="flex space-x-1">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded hover:bg-primary/10 transition-colors" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded hover:bg-danger/10 transition-colors" title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-success rounded hover:bg-success/10 transition-colors" title="复制">
                                <i class="fa fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 教材卡片 5 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden card-hover">
                <div class="relative">
                    <img src="https://picsum.photos/id/28/800/400" alt="初中化学" class="w-full h-48 object-cover">
                    <div class="absolute top-3 right-3">
                        <span class="px-2 py-1 text-xs bg-purple-100 text-purple-800 rounded-full">草稿</span>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-lg">初中化学</h4>
                        <span class="px-2 py-1 text-xs bg-indigo-100 text-indigo-800 rounded-full">化学</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">本书介绍了化学基本概念和实验操作，包括物质的组成、性质和变化，适合初中学生使用。</p>
                    <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                        <span><i class="fa fa-user mr-1"></i> 孙老师</span>
                        <span><i class="fa fa-calendar mr-1"></i> 2025-05-02</span>
                        <span><i class="fa fa-eye mr-1"></i> 325</span>
                    </div>
                    <div class="flex justify-between">
                        <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            查看详情
                        </button>
                        <div class="flex space-x-1">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded hover:bg-primary/10 transition-colors" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded hover:bg-danger/10 transition-colors" title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-success rounded hover:bg-success/10 transition-colors" title="复制">
                                <i class="fa fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 教材卡片 6 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden card-hover">
                <div class="relative">
                    <img src="https://picsum.photos/id/29/800/400" alt="初中生物" class="w-full h-48 object-cover">
                    <div class="absolute top-3 right-3">
                        <span class="px-2 py-1 text-xs bg-success text-white rounded-full">已发布</span>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-lg">初中生物</h4>
                        <span class="px-2 py-1 text-xs bg-pink-100 text-pink-800 rounded-full">生物</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">本书介绍了生命的基本特征、细胞结构、生物的分类和生态系统等内容，配有精美插图。</p>
                    <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                        <span><i class="fa fa-user mr-1"></i> 周老师</span>
                        <span><i class="fa fa-calendar mr-1"></i> 2025-03-28</span>
                        <span><i class="fa fa-eye mr-1"></i> 754</span>
                    </div>
                    <div class="flex justify-between">
                        <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            查看详情
                        </button>
                        <div class="flex space-x-1">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded hover:bg-primary/10 transition-colors" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded hover:bg-danger/10 transition-colors" title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-success rounded hover:bg-success/10 transition-colors" title="复制">
                                <i class="fa fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="flex justify-between items-center mt-8">
            <p class="text-sm text-gray-500">显示 1 到 6 条，共 24 条</p>
            <div class="flex space-x-1">
                <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>上一页</button>
                <button class="px-3 py-1 border border-primary bg-primary text-white rounded-md">1</button>
                <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">2</button>
                <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">3</button>
                <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">4</button>
                <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">下一页</button>
            </div>
        </div>
    </div>

    <!-- 最近更新的教材 -->
    <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
        <div class="flex justify-between items-center mb-5">
            <h3 class="font-semibold text-gray-800">最近更新的教材</h3>
            <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead>
                    <tr>
                        <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">教材名称</th>
                        <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学科</th>
                        <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">适用年级</th>
                        <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                        <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">更新时间</th>
                        <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <tr class="table-hover">
                        <td class="px-4 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/24/100/100" alt="高中数学必修一">
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">高中数学必修一</div>
                                    <div class="text-xs text-gray-500">王教授</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">数学</span>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <span class="text-sm text-gray-900">高中一年级</span>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs bg-success text-white rounded-full">已发布</span>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            2025-03-15 14:30
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                            <button class="text-gray-600 hover:text-primary mr-3">编辑</button>
                            <button class="text-danger hover:text-danger/80">删除</button>
                        </td>
                    </tr>
                    <tr class="table-hover">
                        <td class="px-4 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/26/100/100" alt="高中英语必修一">
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">高中英语必修一</div>
                                    <div class="text-xs text-gray-500">张老师</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">英语</span>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <span class="text-sm text-gray-900">高中一年级</span>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs bg-warning text-white rounded-full">审核中</span>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            2025-04-05 09:15
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                            <button class="text-gray-600 hover:text-primary mr-3">编辑</button>
                            <button class="text-danger hover:text-danger/80">删除</button>
                        </td>
                    </tr>
                    <tr class="table-hover">
                        <td class="px-4 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/28/100/100" alt="初中化学">
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">初中化学</div>
                                    <div class="text-xs text-gray-500">孙老师</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs bg-indigo-100 text-indigo-800 rounded-full">化学</span>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <span class="text-sm text-gray-900">初中二年级</span>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs bg-purple-100 text-purple-800 rounded-full">草稿</span>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            2025-05-02 16:45
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                            <button class="text-gray-600 hover:text-primary mr-3">编辑</button>
                            <button class="text-danger hover:text-danger/80">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 教材使用统计 -->
    <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
        <div class="flex justify-between items-center mb-5">
            <h3 class="font-semibold text-gray-800">教材使用统计</h3>
            <div class="flex space-x-2">
                <button id="weekBtn" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors chart-btn">本周</button>
                <button id="monthBtn" class="px-3 py-1 text-sm bg-primary text-white rounded-md chart-btn">本月</button>
                <button id="yearBtn" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors chart-btn">全年</button>
            </div>
        </div>
        <div class="h-80 chart-container">
            <div id="usageChartLoading" class="chart-loading">正在加载图表数据...</div>
            <canvas id="textbookUsageChart" style="display: none;"></canvas>
        </div>
    </div>

    <!-- 学科分布统计 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow-sm p-5">
            <div class="flex justify-between items-center mb-5">
                <h3 class="font-semibold text-gray-800">学科分布</h3>
                <div class="text-sm text-gray-500">总计: 128本</div>
            </div>
            <div class="h-64 chart-container">
                <div id="subjectChartLoading" class="chart-loading">正在加载学科分布...</div>
                <canvas id="subjectDistributionChart" style="display: none;"></canvas>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-5">
            <div class="flex justify-between items-center mb-5">
                <h3 class="font-semibold text-gray-800">年级分布</h3>
                <div class="text-sm text-gray-500">总计: 128本</div>
            </div>
            <div class="h-64 chart-container">
                <div id="gradeChartLoading" class="chart-loading">正在加载年级分布...</div>
                <canvas id="gradeDistributionChart" style="display: none;"></canvas>
            </div>
        </div>
    </div>

    <!-- 教材状态趋势 -->
    <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
        <div class="flex justify-between items-center mb-5">
            <h3 class="font-semibold text-gray-800">教材状态趋势</h3>
            <div class="flex space-x-2">
                <button id="trendWeekBtn" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors chart-btn">本周</button>
                <button id="trendMonthBtn" class="px-3 py-1 text-sm bg-primary text-white rounded-md chart-btn">本月</button>
                <button id="trendYearBtn" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors chart-btn">全年</button>
            </div>
        </div>
        <div class="h-80 chart-container">
            <div id="trendChartLoading" class="chart-loading">正在加载状态趋势...</div>
            <canvas id="statusTrendChart" style="display: none;"></canvas>
        </div>
    </div>
</main>    

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-center md:text-left mb-4 md:mb-0">
                        <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-file-text-o mr-1"></i> 使用条款
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-shield mr-1"></i> 隐私政策
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- 图表初始化脚本 -->
    <script>
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化所有图表
            initAllCharts();
            
            // 绑定按钮事件
            bindChartButtons();
        });

        // 初始化所有图表
        function initAllCharts() {
            // 模拟异步加载
            setTimeout(() => {
                initTextbookUsageChart();
            }, 500);
            
            setTimeout(() => {
                initSubjectDistributionChart();
            }, 800);
            
            setTimeout(() => {
                initGradeDistributionChart();
            }, 1100);
            
            setTimeout(() => {
                initStatusTrendChart();
            }, 1400);
        }

        // 教材使用统计图表
        let textbookUsageChart;
        function initTextbookUsageChart() {
            try {
                const loadingEl = document.getElementById('usageChartLoading');
                const canvasEl = document.getElementById('textbookUsageChart');
                
                const ctx = canvasEl.getContext('2d');
                textbookUsageChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    datasets: [{
                        label: '使用次数',
                        data: [120, 190, 300, 500, 200, 300, 450, 380, 420, 550, 480, 600],
                        borderColor: '#3B82F6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4,
                        pointBackgroundColor: '#3B82F6',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 6,
                        pointHoverRadius: 8
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            borderColor: '#3B82F6',
                            borderWidth: 1,
                            cornerRadius: 8,
                            displayColors: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)',
                                drawBorder: false
                            },
                            ticks: {
                                color: '#6B7280',
                                font: {
                                    size: 12
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#6B7280',
                                font: {
                                    size: 12
                                }
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
            
            // 隐藏加载状态，显示图表
            loadingEl.style.display = 'none';
            canvasEl.style.display = 'block';
            
        } catch (error) {
            console.error('初始化教材使用统计图表失败:', error);
            const loadingEl = document.getElementById('usageChartLoading');
            loadingEl.innerHTML = '图表加载失败，请刷新页面重试';
            loadingEl.classList.remove('chart-loading');
        }
        }

        // 学科分布饼图
        let subjectDistributionChart;
        function initSubjectDistributionChart() {
            try {
                const loadingEl = document.getElementById('subjectChartLoading');
                const canvasEl = document.getElementById('subjectDistributionChart');
                
                const ctx = canvasEl.getContext('2d');
                subjectDistributionChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['数学', '语文', '英语', '物理', '化学', '生物'],
                    datasets: [{
                        data: [25, 20, 18, 15, 12, 10],
                        backgroundColor: [
                            '#3B82F6', // 蓝色
                            '#10B981', // 绿色
                            '#F59E0B', // 黄色
                            '#EF4444', // 红色
                            '#8B5CF6', // 紫色
                            '#EC4899'  // 粉色
                        ],
                        borderWidth: 2,
                        borderColor: '#ffffff',
                        hoverBorderWidth: 3
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                font: {
                                    size: 12
                                }
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            borderColor: '#3B82F6',
                            borderWidth: 1,
                            cornerRadius: 8,
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = ((value / total) * 100).toFixed(1);
                                    return `${label}: ${value}本 (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
            
            // 隐藏加载状态，显示图表
            loadingEl.style.display = 'none';
            canvasEl.style.display = 'block';
            
        } catch (error) {
            console.error('初始化学科分布图表失败:', error);
            const loadingEl = document.getElementById('subjectChartLoading');
            loadingEl.innerHTML = '图表加载失败，请刷新页面重试';
            loadingEl.classList.remove('chart-loading');
        }
        }

        // 年级分布柱状图
        let gradeDistributionChart;
        function initGradeDistributionChart() {
            try {
                const loadingEl = document.getElementById('gradeChartLoading');
                const canvasEl = document.getElementById('gradeDistributionChart');
                
                const ctx = canvasEl.getContext('2d');
                gradeDistributionChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初中', '高中'],
                    datasets: [{
                        label: '教材数量',
                        data: [12, 15, 18, 14, 16, 13, 22, 18],
                        backgroundColor: [
                            '#3B82F6',
                            '#10B981',
                            '#F59E0B',
                            '#EF4444',
                            '#8B5CF6',
                            '#EC4899',
                            '#06B6D4',
                            '#84CC16'
                        ],
                        borderWidth: 0,
                        borderRadius: 6,
                        borderSkipped: false
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            borderColor: '#3B82F6',
                            borderWidth: 1,
                            cornerRadius: 8,
                            displayColors: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)',
                                drawBorder: false
                            },
                            ticks: {
                                color: '#6B7280',
                                font: {
                                    size: 12
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#6B7280',
                                font: {
                                    size: 12
                                }
                            }
                        }
                    }
                }
            });
            
            // 隐藏加载状态，显示图表
            loadingEl.style.display = 'none';
            canvasEl.style.display = 'block';
            
        } catch (error) {
            console.error('初始化年级分布图表失败:', error);
            const loadingEl = document.getElementById('gradeChartLoading');
            loadingEl.innerHTML = '图表加载失败，请刷新页面重试';
            loadingEl.classList.remove('chart-loading');
        }
        }

        // 教材状态趋势图
        let statusTrendChart;
        function initStatusTrendChart() {
            try {
                const loadingEl = document.getElementById('trendChartLoading');
                const canvasEl = document.getElementById('statusTrendChart');
                
                const ctx = canvasEl.getContext('2d');
                statusTrendChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    datasets: [{
                        label: '已发布',
                        data: [85, 88, 90, 92, 89, 91, 93, 90, 92, 94, 91, 92],
                        borderColor: '#10B981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        borderWidth: 3,
                        fill: false,
                        tension: 0.4,
                        pointBackgroundColor: '#10B981',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 4
                    }, {
                        label: '审核中',
                        data: [12, 15, 18, 16, 20, 18, 15, 19, 16, 14, 18, 18],
                        borderColor: '#F59E0B',
                        backgroundColor: 'rgba(245, 158, 11, 0.1)',
                        borderWidth: 3,
                        fill: false,
                        tension: 0.4,
                        pointBackgroundColor: '#F59E0B',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 4
                    }, {
                        label: '草稿',
                        data: [31, 25, 20, 20, 19, 15, 20, 19, 20, 20, 19, 18],
                        borderColor: '#8B5CF6',
                        backgroundColor: 'rgba(139, 92, 246, 0.1)',
                        borderWidth: 3,
                        fill: false,
                        tension: 0.4,
                        pointBackgroundColor: '#8B5CF6',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                usePointStyle: true,
                                padding: 20,
                                font: {
                                    size: 12
                                }
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            borderColor: '#3B82F6',
                            borderWidth: 1,
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)',
                                drawBorder: false
                            },
                            ticks: {
                                color: '#6B7280',
                                font: {
                                    size: 12
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#6B7280',
                                font: {
                                    size: 12
                                }
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
            
            // 隐藏加载状态，显示图表
            loadingEl.style.display = 'none';
            canvasEl.style.display = 'block';
            
        } catch (error) {
            console.error('初始化状态趋势图表失败:', error);
            const loadingEl = document.getElementById('trendChartLoading');
            loadingEl.innerHTML = '图表加载失败，请刷新页面重试';
            loadingEl.classList.remove('chart-loading');
        }
        }

        // 绑定图表按钮事件
        function bindChartButtons() {
            // 教材使用统计按钮
            document.getElementById('weekBtn').addEventListener('click', function() {
                updateButtonStates(['weekBtn', 'monthBtn', 'yearBtn'], 'weekBtn');
                updateUsageChartData('week');
            });
            
            document.getElementById('monthBtn').addEventListener('click', function() {
                updateButtonStates(['weekBtn', 'monthBtn', 'yearBtn'], 'monthBtn');
                updateUsageChartData('month');
            });
            
            document.getElementById('yearBtn').addEventListener('click', function() {
                updateButtonStates(['weekBtn', 'monthBtn', 'yearBtn'], 'yearBtn');
                updateUsageChartData('year');
            });

            // 状态趋势按钮
            document.getElementById('trendWeekBtn').addEventListener('click', function() {
                updateButtonStates(['trendWeekBtn', 'trendMonthBtn', 'trendYearBtn'], 'trendWeekBtn');
                updateStatusTrendData('week');
            });
            
            document.getElementById('trendMonthBtn').addEventListener('click', function() {
                updateButtonStates(['trendWeekBtn', 'trendMonthBtn', 'trendYearBtn'], 'trendMonthBtn');
                updateStatusTrendData('month');
            });
            
            document.getElementById('trendYearBtn').addEventListener('click', function() {
                updateButtonStates(['trendWeekBtn', 'trendMonthBtn', 'trendYearBtn'], 'trendYearBtn');
                updateStatusTrendData('year');
            });
        }

        // 更新按钮状态
        function updateButtonStates(buttonIds, activeId) {
            buttonIds.forEach(id => {
                const btn = document.getElementById(id);
                if (id === activeId) {
                    btn.classList.remove('bg-gray-100', 'text-gray-700');
                    btn.classList.add('bg-primary', 'text-white');
                } else {
                    btn.classList.remove('bg-primary', 'text-white');
                    btn.classList.add('bg-gray-100', 'text-gray-700');
                }
            });
        }

        // 更新使用统计图表数据
        function updateUsageChartData(period) {
            let labels, data;
            
            switch(period) {
                case 'week':
                    labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                    data = [45, 52, 38, 67, 89, 76, 54];
                    break;
                case 'month':
                    labels = ['第1周', '第2周', '第3周', '第4周'];
                    data = [320, 450, 380, 420];
                    break;
                case 'year':
                    labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                    data = [120, 190, 300, 500, 200, 300, 450, 380, 420, 550, 480, 600];
                    break;
            }
            
            textbookUsageChart.data.labels = labels;
            textbookUsageChart.data.datasets[0].data = data;
            textbookUsageChart.update();
        }

        // 更新状态趋势图表数据
        function updateStatusTrendData(period) {
            let labels, publishedData, reviewData, draftData;
            
            switch(period) {
                case 'week':
                    labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                    publishedData = [92, 93, 91, 94, 90, 92, 93];
                    reviewData = [18, 16, 19, 15, 20, 17, 18];
                    draftData = [18, 19, 17, 20, 18, 19, 17];
                    break;
                case 'month':
                    labels = ['第1周', '第2周', '第3周', '第4周'];
                    publishedData = [91, 92, 93, 94];
                    reviewData = [18, 17, 19, 16];
                    draftData = [19, 18, 17, 20];
                    break;
                case 'year':
                    labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                    publishedData = [85, 88, 90, 92, 89, 91, 93, 90, 92, 94, 91, 92];
                    reviewData = [12, 15, 18, 16, 20, 18, 15, 19, 16, 14, 18, 18];
                    draftData = [31, 25, 20, 20, 19, 15, 20, 19, 20, 20, 19, 18];
                    break;
            }
            
            statusTrendChart.data.labels = labels;
            statusTrendChart.data.datasets[0].data = publishedData;
            statusTrendChart.data.datasets[1].data = reviewData;
            statusTrendChart.data.datasets[2].data = draftData;
            statusTrendChart.update();
        }

        // 侧边栏切换功能
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            // 这里可以添加侧边栏切换逻辑
            console.log('侧边栏切换');
        });

        // 表格行悬停效果
        document.querySelectorAll('.table-hover').forEach(row => {
            row.addEventListener('mouseenter', function() {
                this.classList.add('bg-gray-50');
            });
            row.addEventListener('mouseleave', function() {
                this.classList.remove('bg-gray-50');
            });
        });

        // 卡片悬停效果
        document.querySelectorAll('.card-hover').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.classList.add('shadow-lg', 'transform', 'scale-105');
            });
            card.addEventListener('mouseleave', function() {
                this.classList.remove('shadow-lg', 'transform', 'scale-105');
            });
        });

        // ======= 视图切换功能 =======
        (function() {
            const cardBtn = document.getElementById('cardViewBtn');
            const listBtn = document.getElementById('listViewBtn');
            const container = document.getElementById('textbookViewContainer');

            function setCardView() {
                container.className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6';
                cardBtn.classList.add('text-primary', 'bg-primary/10');
                cardBtn.classList.remove('text-gray-400', 'bg-white');
                listBtn.classList.remove('text-primary', 'bg-primary/10');
                listBtn.classList.add('text-gray-400', 'bg-white');
                // 卡片样式恢复
                container.querySelectorAll('.card-hover').forEach(card => {
                    card.classList.remove('flex', 'flex-row', 'items-center', 'h-40');
                    card.querySelector('.relative').classList.remove('w-40', 'h-full', 'flex-shrink-0', 'rounded-none');
                    card.querySelector('img').classList.remove('h-full', 'object-cover');
                    card.querySelector('img').classList.add('h-48', 'object-cover');
                    card.querySelector('.p-4').classList.remove('flex-1', 'py-2', 'px-6');
                    card.querySelector('.p-4').classList.add('p-4');
                });
            }
            function setListView() {
                container.className = 'flex flex-col gap-4';
                listBtn.classList.add('text-primary', 'bg-primary/10');
                listBtn.classList.remove('text-gray-400', 'bg-white');
                cardBtn.classList.remove('text-primary', 'bg-primary/10');
                cardBtn.classList.add('text-gray-400', 'bg-white');
                // 卡片样式变为横向
                container.querySelectorAll('.card-hover').forEach(card => {
                    card.classList.add('flex', 'flex-row', 'items-center', 'h-40');
                    card.querySelector('.relative').classList.add('w-40', 'h-full', 'flex-shrink-0', 'rounded-none');
                    card.querySelector('img').classList.remove('h-48');
                    card.querySelector('img').classList.add('h-full', 'object-cover');
                    card.querySelector('.p-4').classList.remove('p-4');
                    card.querySelector('.p-4').classList.add('flex-1', 'py-2', 'px-6');
                });
            }
            cardBtn.addEventListener('click', setCardView);
            listBtn.addEventListener('click', setListView);
        })();
    </script>
</body>

</html>
